<template>
  <div>
    <div  @drop="dragHandle" @dragover="dragOver" style="width: 600px; height: 600px;border: 1px solid #999999;position: relative;">
    <!-- {{ chartEditStore.getComponentList }} -->
    <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
      <component :is="item.chartConfig.chartKey"
      style="position: absolute;"
      :style="{...useSizeStyle(item.attr),...useComponentStyle(item.attr,index)}"></component>
    </div>
  </div>
  </div>

</template>

<script lang="ts" setup>
import { dragHandle } from './hooks/useDrag'
import { useChartEditStore } from '@/store/modules/chartEditStore/index'
import { useSizeStyle,useComponentStyle } from './hooks/useStyle'
const chartEditStore = useChartEditStore()
function drgenter(e) {
  console.log(e)
  e.preventDefault()
    // e.stopPropagation()
    const component = e.dataTransfer.getData('index')
    // shows.value=component=='aa'
    console.log(component)
console.log(e)
}
function dragOver(e){
  e.preventDefault();
  // e.stopPropagation();
  const dd = e.dataTransfer.getData('index')
  console.log(dd)

}
</script>
<style lang="scss" scoped>
</style>